<template>
  <div class="parent">
    <div class="title">
      <h3>操作模块：</h3>
      <span>
        {{ operLogDetailData.title }}
      </span>
    </div>

    <div class="title">
      <h3>请求地址：</h3>
      <span>
        {{ operLogDetailData.open_url }}
      </span>
    </div>
  </div>

  <Divider/>

  <div class="parent">
    <div class="title">
      <h3>登录信息：</h3>
      <span>
        {{ operLogDetailData.oper_name + '/' + operLogDetailData.oper_ip + '/' + operLogDetailData.oper_location }}
      </span>
    </div>

    <div class="title">
      <h3>请求方式：</h3>
      <span>
        {{ operLogDetailData.request_method }}
      </span>
    </div>
  </div>

  <Divider/>

  <div class="parent">
    <div class="title">
      <h3 style="width: 8%">操作方法：</h3>
      <span>
        {{ operLogDetailData.method }}
      </span>
    </div>
  </div>

  <Divider/>

  <div class="parent">
    <div class="title">
      <h3 style="width: 8%">请求参数：</h3>
      <span>
        {{ operLogDetailData.oper_param ? operLogDetailData.oper_param : '{}' }}
        <!--{{ operParam }}-->
      </span>
    </div>
  </div>

  <Divider/>

  <div class="parent">
    <div class="title">
      <h3 style="width: 8%">返回参数：</h3>
      <span>
        {{ operLogDetailData.json_result ? operLogDetailData.json_result : '{}' }}
        <!--{{ jsonResult }}-->
      </span>
    </div>
  </div>

  <Divider/>

  <div class="parent">
    <div class="title">
      <h3>操作状态：</h3>
      <span>
        {{ operLogDetailData.status === 0 ? '正常' : '异常' }}
      </span>
    </div>

    <div class="title">
      <h3>操作时间：</h3>
      <span>
        {{ operLogDetailData.oper_time }}
      </span>
    </div>
  </div>
</template>

<script setup>

import {computed, getCurrentInstance, onMounted, reactive} from "vue";
import {LogService} from "@/api/log";

const {proxy} = getCurrentInstance();

const operLogDetailData = reactive({
  title: '',
  method: '',
  request_method: '',
  oper_name: '',
  open_url: '',
  oper_ip: '',
  oper_location: '',
  json_result: '',
  oper_param: '',
  oper_time: '',
  status: ''
})

const getOperLogDetail = async (e) => {
  console.log(e)
  const {data} = await LogService.GetOperLogDetailById({
    log_id: e
  })
  if (data.code === 200) {
    console.log(data.data)
    console.log(decodeURIComponent(data.data.json_result))
    setFormData(data.data);
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

const setFormData = (param) => {
  Object.assign(operLogDetailData, param);
  // 转换化unicode
  operLogDetailData.oper_param = eval(operLogDetailData.oper_param);
  operLogDetailData.json_result = eval(operLogDetailData.json_result);
}

defineExpose({
  getOperLogDetail
})
</script>

<style scoped lang="less">
@import "./oper-log-detail.less";
</style>
